<template>
	<div class="store">
		<div class="header vux-1px-b" v-show="false">
			<div class="iconfont back-icon" @click="backPrev">&#xe624;</div>
			{{pageTitle}}
		</div>
		<div class="swiper" id="swiper">
			<!--<swiper>
				<swiper-slide v-for="(page,index) in pages" :key="index">
					<div class="active"					
						v-for="(item,index) in page"
						:class="{'current' : current === index}" 
						@click="getAuthorInfo(index,item.makername,item.creat_time,item.maker_description),getWorks(item.id,item)"
						:key="item.id"
					>
						<div class="swiper-img">
							<img :src="item.maker_face" height="100%" width="100%" />
						</div>
					</div>
				</swiper-slide>
			</swiper>-->
			
		</div>
		<div class="content">	
				<div class="img-warrp">
					<swiper :options="swiperOption" v-if="workList.length">
						<swiper-slide v-for="(item,index) in workList" :key="index">
							<a :href="linkTo">
								<img :src="item" width="100%"/>
							</a>																				
						</swiper-slide>
						<div class="swiper-pagination"  slot="pagination"></div>
					</swiper>
					<div class="swiper-button-prev swiper-button-black"></div>
    				<div class="swiper-button-next swiper-button-black"></div>
					<div class="finger">
						<div class="finger-img">
							<img src="../../assets/images/coinShop/finger.png"/>
						</div>
						<p class="desc">{{tiyan}}</p>
					</div>
				</div>
		</div>
		<div class="store-info">
			<h3 class="title">作者:{{authorName}}</h3>
			<div class="time">发布时间:{{time}}</div>
			<!--<p class="desc">描述:<span v-html="description"></span></p>-->
		</div>
		<div class="padd-bottom"></div>
		<div class="btn" @click="goNextPage">认领此宝店</div>
	</div>
</template>

<script>
	import { Confirm } from 'vux'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	import { swiper , swiperSlide } from 'vue-awesome-swiper'
	import 'swiper/dist/css/swiper.css'	
	export default{
		name : "getStore",
		data(){
			return{
				tiyan      : '点击体验',
				isWeChat   : true,
				type       : '',
				authorList : [],
				workList   : [],
				current      : 0,
				authorName   : '',
				time         : '',
				description  : '',
				swiperOption : {
					pagination: {
						el :  '.swiper-pagination'
					},
					autoplay  : true,
					navigation: {
						nextEl: '.swiper-button-next',
    					prevEl: '.swiper-button-prev',
					}			
				},
				pageTitle : '',
				demand_id : '',
				showConf  : false,
				tid       : '',
				linkTo    : ''
			}
		},
		methods:{
			goNextPage(){
				let type = this.$route.query.type
				if(type){ //通过链接的方式认领
					if(type == 14673){
						this.$router.push('/enterpriseInfo')
					}else if(type == 14706){
						this.$router.push('/personalInfo')	
					}
				}else{//正常流程的认领
					if(getCookie('type') === 'media'){
						this.$router.push('/enterpriseInfo')
					}else{
						this.$router.push('/personalInfo')				
					}
				}
				
			},
//			getStatus(){
//				let info = {
//					userinfo  : this.urlParam(),
//					demand_id : this.demand_id
//				}
//				this.$axiosPost('/api/onlinestore/isgetstore',{
//					data : JSON.stringify(info)
//				}).then( res => {
//					if(res.status == 0){				
//						this.$router.push({path:'examine',query:{status:res.status,fromin:getCookie('type')}})																		
//					}else if(res.status == -1){		
//						this.$router.push({path:'examine',query:{status:res.status,fromin:getCookie('type'),reason:res.reason}})				
//					}else if(res.status == 1){
//						this.$router.push({path:'examine',query:{status:res.status,fromin:getCookie('type')}})
//					}
//				})
//			},
			onConfirm(){
				
			},
			backPrev(){
//				this.$router.push({path:'/coinShopList',query:{
//					type:getCookie('type')
//				}})
				this.$router.go(-1)
			},
			getDataList(shopid){
				let info = {
					userinfo : this.urlParam(),
					id 		 : this.$route.query.id || shopid
				}
				let tid = {}
				this.$axiosPost('/api/onlinestore/selectMaker',{
					data : JSON.stringify(info)
				}).then( res => {
					if(res){
						this.authorList = res
						this.type   = this.authorList[0].shop_type						
						this.description = this.authorList[0].maker_description
						this.authorName  = this.authorList[0].makername || ''
						this.time        = this.authorList[0].creat_time
						tid.id 		     = this.authorList[0].shop_id
						tid.shop_id      = this.authorList[0].shop_id
						this.demand_id   = this.authorList[0].demand_id
						let firstId 	 = this.authorList[0].id
						this.getWorks(firstId,tid)
						//this.getStatus()
					}				
				})
			},
			getWorks(id,item){
				localStorage.setItem('author',JSON.stringify(item))
				if(!item.shop_id){
					this.tid = item.id
				}
				if(item.shop_id){
					this.tid = item.shop_id
				}			
				this.linkTo = 'mofing://serviceNum/?shopId='+this.tid+'&key=serviceNum'
				let info = {
					userinfo : this.urlParam(),
					id 		 : id || firstId
				}
				this.$vux.loading.show({text:"加载中"})
				this.$axiosPost('/api/onlinestore/getmakerimg',{
					data : JSON.stringify(info)
				}).then( res => {
					this.$vux.loading.hide()
					if(res && res.code != 404){
						this.workList = res
					}
				})
			},
			urlParam(){
				let userinfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				return userinfo
			},
			getAuthorInfo(index,name,time,desc){
				this.current    = index
				this.description = desc
				this.authorName = name || ''
				this.time       = time || ''
			},
			isWeiXin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			       	this.tiyan = '去APP中体验'
			       	document.title = '选择店铺'
			       	document.getElementById('swiper').style.margin = 0
			    } else {
			        this.isWeChat = true
			    }
			},
//			getStoreByLink(shopid){
//				let info = {
//					userinfo : this.urlParam(),
//					store_id : shopid
//				}
//				this.$axiosGet('/api/onlinestore/getStoreInfo',{
//					data : JSON.stringify(info)
//				}).then( res => {
//					if(res && res.code != 404){
//						this.itemInfo = {
//							shop_name : res.title,
//							shop_link : res.shop_link,
//							face_path : res.face_path
//						}
//						this.author = {
//							demand_id : res.demand_id,
//							shop_id   : res.shop_id,
//							maker_uid : res.maker_uid,
//							maker_description : res.maker_description
//						}
//						setCookie('mid',this.author.demand_id)
//						localStorage.setItem('storeAvatar',JSON.stringify(this.itemInfo))
//						localStorage.setItem('author',JSON.stringify(this.author))
//						localStorage.setItem('id',JSON.stringify(res.cat_id))
//					}
//				})
//			},
		},
		computed:{
			pages(){
				let pages = []
				this.authorList.forEach((item ,index) => {
					let page = Math.floor(index / 6)
					if(!pages[page]){
						pages[page] = []
					}
					pages[page].push(item)
				})
				return pages
			}
		},
		watch:{
			authorList(){
				localStorage.setItem('author',JSON.stringify(this.authorList[0]))
			}
		},
		mounted(){
			setCookie('mid',this.$route.query.id,30)
			document.title = '认领店铺'
			this.isWeiXin()
	
			this.getDataList()

			
			let itemInfo = JSON.parse(localStorage.getItem('storeAvatar'))
			this.pageTitle = itemInfo.shop_name
		},
		components:{
			swiper,
			swiperSlide,
			Confirm
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';		
	.store /deep/ .swiper-container{
		overflow: inherit
	}
	.store /deep/ .swiper-container{
		height: 100%;
	}
	.store /deep/ .swiper-pagination-bullet{
		background:#fff;
		color: #fff;
		opacity: 1;
	}
	.store /deep/ .swiper-pagination-bullet-active{
		background: #fb2628;
		border: 1px solid #fff;
	}
	.store /deep/ .weui-dialog__btn_primary{
		color: red;
	}
	.store{
		text-align: left;
		.header{
			position: fixed;
			left:0;
			top:0;
			right:0;
			z-index:99;
			height: 1.44rem;
			line-height: 2rem;
			text-align: center;
			background:#eee;
			font-size:.34rem;
			.iphonex;		
			.back-icon{
				position: absolute;
				left: 0;
				top: .54rem;
				height: .9rem;
				line-height: .9rem;
				padding: 0 .2rem;
				color:#000;
			}
		}
		.swiper{
/*			margin-top: 1.2rem;*/
			overflow: hidden;
			padding: .27rem .4rem;
			background: #fff;
			/*.active{
				overflow: hidden;
				float: left;
				margin: .0 .05rem;
				height: 1rem;
				width: 1rem;
				border-radius: 50%;
				.swiper-img{
					margin: .08rem auto;
					margin-bottom: .1rem;
					overflow: hidden;
					height: .8rem;
					width: .8rem;
					border-radius: 50%;
				}
			}
			.current{
				border:.03rem solid #FF9900;
			}
	*/
			}
		.content{
			padding-bottom: .8rem;
			.img-warrp{
				height:8rem;
				
				.swiper-button-prev,.swiper-button-next{
					background-size: 20px 20px;
				}
				.finger{
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -.6rem;
					margin-top: -.6rem;
					height: 1.2rem;
					width: 1.2rem;
					border-radius: .1rem;
					background: rgba(0,0,0,.5);
					z-index: 100;
					.finger-img{
						width: 50%;
						height: 50%;
						margin: .1rem auto;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.desc{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space:nowrap;
						text-align: center;
						font-size: .2rem;
						color: #fff;
					}
				}
			}
		}

		.store-info{
			padding-bottom: 0.8rem;
			background: #fff;
			text-align: center;
			.title{
				line-height: .56rem;
			}
			.time{
				line-height: .48rem;
				color: #9f9f9f;
			}
			.desc{
				padding: 0 .6rem;
				color:#9f9f9f;
				font-size: .24rem;
				line-height: .34rem;
			}
		}
		.content{
			padding-top: .1rem;
			background: #fff;
			.img-warrp{	
				overflow: hidden;		
				margin: 0 auto;
				margin-top: .5rem;
				width: 60%;
				height: 7.2rem;	
				border: .02rem solid #ccc;	
				box-shadow: 1px 1px 6px #ccc;
			}
		}
		.btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			line-height: 1rem;
			text-align: center;
			background: #fb2628;
			color: #fff;
		}
	}
</style>